<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="./vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>v-html,v-text</h3>
        <!-- {{}}可以用来设置标签中的部分内容 -->
        <p>学习内容：{{str}}</p>

        <p>{{str}}</p>
        <!-- v-text:设置标签中的 全部内容 -->
        <p v-text="str"></p>
        <!-- v-text:设置标签中的 
            如果这里内容是html字符串，它会转义一下，只是显示字符串
            而不会显示成对应的dom结构 -->

        <div v-text="strHtml"></div>

        <!-- v-html用来设置标签中的内容。与v-text不同，它直接解析其中的
        html结构，并渲染 -->
        <div v-html="strHtml"></div>
        
    </div>


    <script>
        // v-text : ===> innerText
        // v-html : ===> innerHTML
        const vm = new Vue({
            el: "#app",
            data: {
                str: 'vue',
                // 有时，从后端取回来的数据是一个html字符串。
                // 例如：获取文章详情，取回来就是一html字符串。

                strHtml: '<h1>vue</h1>'
            }
        })
    </script>

</body>
</html>